<script setup lang="ts">

import {ref} from "vue";
import ChooseTime from "@/views/booking/launch/tiem/chooseTime.vue";
import ChooseTants from "@/views/booking/launch/tiem/chooseTants.vue";
import ChooseConsultation from "@/views/booking/launch/tiem/chooseConsultation.vue";
import ConsultSubstance from "@/views/booking/launch/tiem/consultSubstance.vue";
import {getSubmit} from "@/api/home/index";
import router from "@/router";


let deliverObj = ref({})

function getTime(val) {
    deliverObj.value = val
}

let checked1 = ref(false)
const visible = ref(false)
let studentId = ref('')

let setDataSubmit = ref({
    studentId: JSON.parse(localStorage.getItem('studentId')).toPrecision(18),
    schedulingId: '',
    mode: '线下咨询',
    content: '',
    peopleType: 0,
})

// 传递选择哪个老师排的班 chooseTants
function schedulingId(val) {
    setDataSubmit.value.schedulingId = val.value
}

function isRead() {
    if (checked1.value) {
        getSubmit(setDataSubmit.value).then(res=>{
            console.log(res)
            if (res == 200) {
                ElMessageBox.alert(
                    `<strong>${res.msg}
                        <div>
                        <p>温馨提示</p>
                        请提前候场，咨询地址和联系方式
                        请到个人中心-我的咨询中进行查
                        看，如需取消预约请提前24小时进
                        行操作，多次出现爽约的情况将被封禁账号
                        </div>></strong>`,
                    '提示',
                    {
                        dangerouslyUseHTMLString: true,
                    }
                )
                router.go(-1)
            } else {
                ElMessageBox.alert(
                    `<strong>${res.msg}</strong>`,
                    '提示',
                    {
                        dangerouslyUseHTMLString: true,
                    }
                )
            }
        })
    } else {
        visible.value = true
    }
}

// 打开消息弹框
import { ElMessageBox } from 'element-plus'

</script>

<template>
  <!--  预约时间-->
    <div class="box">
        <!--      选取时间段-->
        <div class="time">
            <choose-time @getTime="getTime"></choose-time>
        </div>
        <!--      选取咨询师-->
        <div class="consultants">
            <choose-tants :deliverObj="deliverObj" @schedulingId="schedulingId"></choose-tants>
        </div>
        <!--      咨询方式-->
        <div class="consultation">
            <choose-consultation></choose-consultation>
        </div>
        <!--      咨询内容-->
        <div class="consultSubstance">
            <consult-substance></consult-substance>
        </div>
        <div class="btn">
            <el-button type="primary" class="agreementBtn" @click="isRead">发起预约</el-button>
        </div>

        <el-popover :visible="visible" placement="top" :width="170">
            <p>请阅读并同意预约协议</p>
            <div style="text-align: right; margin: 0">
                <el-button size="small" text @click="visible = false">取消</el-button>
                <el-button size="small" type="primary" @click="visible = false">
                    确定
                </el-button>
            </div>
            <template #reference>
                <div class="agreement">
                    <el-checkbox v-model="checked1" name="check" size="large" style="margin-right: 1%"/>
                    <label for="check">请阅读
                        <router-link to="/agreement">《预约协议》</router-link>
                        ，勾选代表已同意</label>
                </div>
            </template>
        </el-popover>
    </div>
</template>

<style scoped>
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.Date {
    margin-top: 2%;
    margin-bottom: 8%;
}

.consultSubstance {
    margin-top: 3%;
}

.btn {
    margin: 5% auto;
    width: 66%;
    height: 12vw;

    .agreementBtn {
        width: 100%;
        height: 100%;
        font-size: 5vw;
    }
}

.consultation {
    margin-top: 5%;
}

.agreement {
    margin: auto;
    width: 95%;
}
</style>